import {reactive} from "vue";

const store = {
    debug: true,

    // 使用一个 reactive 方法让对象作为响应式对象。
    state: reactive({
        message: 'Hello!'
    }),

    screenWidth: reactive({
        value: window.innerWidth
    }),

    setMessageAction(newValue) {
        if (this.debug) {
            console.log('setMessageAction triggered with', newValue)
        }

        this.state.message = newValue
    },

    setScreenWidthAction(newValue) {
        if (this.debug) {
            console.log('setScreenWidthAction triggered with', newValue)
        }

        this.screenWidth.value = newValue
    },

    clearMessageAction() {
        if (this.debug) {
            console.log('clearMessageAction triggered')
        }

        this.state.message = ''
    }
}

export default store